<template>
  <el-form-item
    v-if="showItem"
    :label="item.label"
    :prop="item.post"
    :rules="item.rules_arr"
    labelWidth="100"
    :class="modelClass"
  >
    <div @mouseleave="showOrHidEdit(2)" @mouseenter="showOrHidEdit(1)">
      <template v-if="item.type == 'radio'">
        <radio
          :type="item.type"
          :post="item.post"
          :form="form"
          :options="item.options_arr"
        >
        </radio>
      </template>
      <template v-if="item.type == 'checked'">
        <checked
          :type="item.type"
          :post="item.post"
          :form="form"
          :options="item.options_arr"
        >
        </checked>
      </template>
      <template v-if="item.type == 'radioInput'">
        <radioInput
          :type="item.type"
          :post="item.post"
          :form="form"
          :options="item.options_arr"
        >
        </radioInput>
      </template>
    </div>
    {{item.ishoverShow}}
    <div class="deleteBtn" v-if="item.ishoverShow && model == 'edit'">
      <el-button
        type="danger"
        size="small"
        icon="el-icon-delete"
        @click="deleteItem(item)"
      ></el-button>
    </div>
    <!-- <components 
      :type='item.type'
      :post='item.post'
      :options='item.options'
    >
    </components> -->
  </el-form-item>
</template>

<script>
import radio from "./radio";
import checked from "./checked";
import radioInput from "./radioInput";
export default {
  components: {
    radio,
    checked,
    radioInput,
  },
  data() {
    return {};
  },
  watch: {
    item: {
      handler: function (val) {
      }
    }
  },
  created() {},
  methods: {
    deleteItem(item) {
      this.$emit("deleteItem", item);
    },
    showOrHidEdit(type) {
      let obj = {
        itemIndex: this.itemIndex,
        // item: this.item,
        isShow: type == 1 ? true : false,
      };
      this.$emit("setHoverShow", obj);
    },
  },
  computed: {
    showItem: function () {
      let condition = this.item.display_condition_arr;
      // 如果是null 是可以显示
      if (condition) {
        let relyItem = this.formList.filter((item) => item.id == condition.id);

        // 现在只根据某个问题的选项值 判断显不显示
        if (this.form[relyItem[0].post] == condition.value) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },

    modelClass() {
      switch (this.model) {
        case "submit":
          return "";
        case "edit":
          return "edit-form_item";
        case "readOnly":
          return "";
      }
    },
  },
  props: {
    item: {
      type: Object,
      default: {},
    },
    form: {
      type: Object,
      default: {},
    },
    formList: {
      type: Array,
      default: () => [],
    },
    model: {
      type: String,
      default: "submit", // 问卷调查表单模式  默认是提交模式一般用与前台提交文件  edit 编辑模式用与后台编辑form表单 readOnly 只读模式
    },
    itemIndex: {
      type: Number,
      default: 0
    }
  },
};
</script>

<style lang='less'>
.edit-form_item {
  padding-left: 15px;
  position: relative;
  box-sizing: border-box;

  .el-form-item__content {
    position: initial;
  }
  .deleteBtn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.edit-form_item:hover {
  -webkit-box-shadow: 0 2px 12px 0 #ccc;
  -moz-box-shadow: 0 2px 12px 0 #ccc;
  // background: burlywood;
}
</style>